<template>
  <div>
    <wy-banner></wy-banner>
    <!--预约下单-->
    <div class="container">
      <div class="content-title clear">
        <h1 class="title">预约下单</h1>
        <p class="title-en">RESERVATIONS</p>
        <p class="underline"></p>
      </div>
      <div class="reservations clear">
        <div class="list-top">
          <ul class="brand-list clear">
            <li v-for="(item, index) in brandList" v-show="item.status=='1'" :class="{active:activeIndex==item.No}"
              @click="brandTab(item,index)" :key="item.No">
              {{item.brandName}}
            </li>
          </ul>
        </div>
        <div class="clear">
          <div class="brand-left">
            <img src="./assets/img/reservat.jpg" />
          </div>
          <div class="brand-right">
            <ul class="model-list">
              <li v-for="(item, index) in modelList" v-show="index<9" @click="modelClick(item,index)" :key="item.No">
                <div class="model-list-li">
                  <div class="model-img">
                    <img src="./assets/img/telphone.png" />
                  </div>
                  <p>{{item.modelName}}</p>
                </div>
              </li>
              <li v-if="modelList.length>9" @click="other()">
                <div class="model-list-li">
                  <div class="other-img">
                    <img src="./assets/img/other.png" />
                  </div>
                  <p>其他</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--我们的优势-->
      <div class="content-title clear">
        <h1 class="title">我们的优势</h1>
        <p class="title-en">MY ADVANTAGE</p>
        <p class="underline"></p>
      </div>
      <div class="advantage text-center">
        <el-row>
          <el-col :span="6" v-for="item in advantageList" :key="item.id">
            <div class="small-circle vertical-middle">
              <p class="text-center word">{{item.word}}</p>
            </div>
            <div class="describe">
              <h1>{{item.describe}}</h1>
              <p class="detail-describe">{{item.detailDescribe}}</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--服务流程-->
      <div class="service-flow">
        <el-row>
          <el-col :span="8" v-for="(item,index) in serviceFlowList" :key="item.id">
            <div class="grid-content text-center" :class="{active:serviceFlowIndex==index}"
              @mouseover="serviceTab(index)">
              <div class="mask">
                <div class="icon-circle vertical-middle">
                  <p class="width100">
                    <i class="iconfont" :class="item.iconfont"></i>
                  </p>
                </div>
                <div class="width100">
                  <h1>{{item.title}}</h1>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="flow-path clear text-center">
        <img v-show="serviceFlowPath=='SM'" src="./assets/img/SM.jpg" />
        <img v-show="serviceFlowPath=='DD'" src="./assets/img/DD.jpg" />
        <img v-show="serviceFlowPath=='YJ'" src="./assets/img/YJ.jpg" />
      </div>
    </div>
  </div>
</template>

<script>
  import r from '../../utils/RequestUtilcopy'
  import WyBanner from './banner.vue'
  export default {
    name: 'index',
    components: {
      WyBanner
    },
    data() {
      return {
        IMG_BASE_URL: './assets/img/',
        activeIndex: 0,
        brandList: [],
        modelList: [],
        allData: [],
        advantageList: [{
          id: 1,
          word: '免',
          describe: '免费上门',
          detailDescribe: '一键预约 极速上门'
        }, {
          id: 2,
          word: '¥',
          describe: '价格透明',
          detailDescribe: '全网低价 公开透明'
        }, {
          id: 3,
          word: '录',
          describe: '全程录像',
          detailDescribe: '维修录像 保护隐私'
        }, {
          id: 4,
          word: '180',
          describe: '180天保修',
          detailDescribe: '超长质保 售后无忧'
        }],
        serviceFlowIndex: 0,
        serviceFlowList: [{
          id: 1,
          iconfont: 'icon-zhuye',
          title: '上门服务'
        }, {
          id: 2,
          iconfont: 'icon-stores',
          title: '到店服务'
        }, {
          id: 3,
          iconfont: 'icon-youjian',
          title: '邮寄服务'
        }],
        serviceFlowPath: 'SM',
        serviceFlowPathList: [{
          imgSrc: 'SM',
        }, {
          imgSrc: 'DD',
        }, {
          imgSrc: 'YJ',
        }],
        accessAmount: null,
        evaluateList: null,
        animate: false,
        selectedData: {
          brand: null,
          model: null
        }
      }
    },
    methods: {
      //品牌切换
      brandTab(item, index) {
        let that = this;
        that.selectedData.brand = {
          No: item.No,
          brandName: item.brandName
        }
        that.activeIndex = item.No;
        let modellist = JSON.parse(window.localStorage.getItem('model-list'));
        let models = modellist.filter((it) => {
          if (it.No == item.No) {
            return it;
          }
        });
        that.modelList = models[0].children;
      },
      other() {
        window.sessionStorage.setItem("selectedData", JSON.stringify(this.selectedData));
        this.$router.push({
          path: '/web/selectfault'
        });
      },
      //服务切换
      serviceTab(index) {
        let that = this;
        that.serviceFlowIndex = index;
        that.serviceFlowPath = that.serviceFlowPathList[index].imgSrc;
      },
      modelClick(item, index) {
        this.selectedData.model = {
          id: item.No,
          name: item.modelName
        }
        window.sessionStorage.setItem("selectedData", JSON.stringify(this.selectedData));
        this.$router.push({
          path: '/web/selectfault'
        });
      },
      //从url截取数据
      getQueryStr(sArgName) {
        let args = window.location.href.split("?");
        let retval = "";
        if (args[0] == window.location.href) /*参数为空*/ {
          return retval; /*无需做任何处理*/
        }
        let str = args[1];
        args = str.split("&");
        for (let i = 0; i < args.length; i++) {
          str = args[i];
          let arg = str.split("=");
          if (arg.length <= 1) continue;
          if (arg[0] == sArgName) retval = arg[1];
        }
        return retval;
      }
    },
    mounted: function () {
      document.getElementsByTagName('body')[0].scrollTop = 0;
      let that = this;
      let AllData = JSON.parse(window.sessionStorage.getItem("AllData"));
      let evaluateData = JSON.parse(window.sessionStorage.getItem("evaluateData"));
      this.brandList = JSON.parse(window.localStorage.getItem("brandList"));

      let model = JSON.parse(window.localStorage.getItem("model-list"));
      let m = model.filter((item) => {
        if (item.No == this.brandList[0].No) {
          return item;
        }
      });
      this.modelList = m[0].children;
      this.selectedData.brand = {
        No: '1634803770383',
        brandName: '苹果'
      }
      this.activeIndex = '1634803770383';
    }
  }

</script>

<style scoped="scoped">
  @import url("./assets/css/index.css");
  @import url("./assets/icon/iconfont.css");

  .iconfont {
    font-size: 30px;
  }

  .content-title {
    padding: 50px 0 30px 0;
    text-align: center;
  }

  .title {
    font-weight: normal;
    letter-spacing: 10px;
    margin-bottom: 10px;
  }

  .title-en {
    color: #737373;
    letter-spacing: 1px;
  }

  .underline {
    width: 45px;
    height: 5px;
    margin: 15px auto 0;
    background: #2995d2;
  }

  .reservations {
    padding: 10px 0 100px 0;
    background: #f5f5f5;
  }

  .brand-list {
    border-bottom: 1px solid #ccc;
    margin-bottom: 40px;
  }

  .brand-list li {
    float: left;
    line-height: 30px;
    padding: 10px 45px;
    color: #8c8c8c;
    cursor: pointer;
  }

  .brand-list li.active {
    color: #2995d2;
    border-bottom: 5px solid #2995d2;
  }

  .brand-left {
    float: left;
    width: 240px;
    margin-right: 20px;
  }

  .brand-right {
    height: 100%;
    float: left;
    width: 940px;
    background-color: #fff;
  }

  .model-list li {
    float: left;
    height: 200px;
    width: 20%;
    cursor: pointer;
  }

  .model-list-li {
    text-align: center;
    width: 100%;
    height: 100%;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
  }

  .model-img {
    height: 90px;
    padding: 40px 0 15px 0;
  }

  .other-img {
    padding: 40px 0 15px 0;
  }

  .model-img img {
    max-height: 100%;
  }

  .advantage {
    height: 300px;
    background-color: #f7f8fa;
    color: #898989;
  }

  .advantage .el-col {
    padding: 30px 0;
  }

  .vertical-middle {
    display: flex;
    /*Flex布局*/
    display: -webkit-flex;
    /* Safari */
    align-items: center;
    /*指定垂直居中*/
  }

  .small-circle {
    width: 100px;
    height: 100px;
    border: 10px solid #e8e4e4;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 auto;
  }

  .word {
    width: 100%;
    font-size: 50px;
  }

  .describe {
    margin-top: 40px;
  }

  .describe h1,
  .mask h1 {
    font-weight: normal;
  }

  .detail-describe {
    margin-top: 15px;
    opacity: 0;
  }

  .advantage .el-col:hover {
    padding: 30px 0 40px;
  }

  .advantage .el-col:hover .small-circle {
    background-color: #2392d1;
    color: #fff;
  }

  .advantage .el-col:hover .describe {
    color: #2392d1;
    margin-top: 30px;
  }

  .advantage .el-col:hover .detail-describe {
    opacity: 1;
    transition: all 0.3s;
  }

  .service-flow {
    margin-top: 100px;
  }

  .grid-content {
    width: 281px;
    height: 162px;
    margin: 0 auto;
    border: 3px solid #fff;
    position: relative;
    color: #fff;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin: 30px auto 15px;
  }

  .grid-content.active {
    border: 3px solid #2392d1;
    color: #2392d1;
  }

  .grid-content.active .icon-circle {
    border: 3px solid #7dcde9;
  }

  .width100 {
    width: 100%;
  }

  .flow-path {
    padding: 130px 0;
    height: 140px;
    overflow: hidden;
  }

  .pageView {
    position: relative;
    margin-bottom: 150px;
  }

  .pageView-img {
    height: 501px;
  }

  .pageView-img img {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -622.5px;
  }

  .pageView-count {
    position: absolute;
    width: 990px;
    height: 190px;
    padding-left: 50px;
    background: #f0efef;
    border-radius: 20px;
    bottom: -150px;
    left: 50%;
    margin-left: -520px;
  }

  .access-word {
    margin-left: 20px;
    font-size: 50px;
    letter-spacing: 5px;
  }

  .accessNum {
    width: 461px;
    height: 127px;
    color: #fff;
    font-size: 66px;
    letter-spacing: 40px;
  }

  .accessNums {
    margin-left: 20px;
  }

  .evaluateList {
    margin-bottom: 120px;
  }

  .anim {
    transition: all 1s;
    transform: translateY(-214px);
  }

  .evaluateList-left {
    width: calc(100% - 510px);
    float: left;
    height: 642px;
    overflow: hidden;
    border-top: 1px solid #e3e2e2;
  }

  .assess-list {
    padding: 35px 0 20px 0;
    height: 158px;
    border-bottom: 1px solid #e3e2e2;
    overflow: hidden;
  }

  .assess-time {
    padding: 15px 0;
    color: #959595;
  }

  .user-img {
    height: 100px;
    overflow: hidden;
  }

  .user-tel {
    padding: 10px 0;
    color: #959595;
  }

  .user-img img {
    height: 100%;
  }

  .review-content {
    line-height: 28px;
    height: 112px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .comment-region {
    margin-top: 5px;
    color: #959595;
  }

</style>
